<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>socket.io 示例</title>
  </head>
  <body>
    <button>发送消息给服务器</button>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
    <script>
      // 建立连接
      const socket = io('http://localhost:3000', {
        transports: ['websocket', 'polling'],
      })
      // 监听连接建立状态
  
      socket.on('connect', () => {
        console.log('建立连接...')
      })
			// 监听连接断开状态
      socket.on('disconnect', () => {
        console.log('断开连接...')
      })

      // 自定义事件，事件是用来传递数据的
      //接收服务器传过来的数据
socket.on('sendToClient', (msg) => {
  console.log('服务器给我回消息了~~',msg)
})

// 触发服务端定义的事件，将数据传递给服务端
//给服务器发送数据
socket.emit('send-some-data', '这里是数据', () => {
  // 
})

document.querySelector('button').addEventListener('click',function(){
  socket.emit('send-some-data' ,'你好呀',()=>{

  })
})

    </script>
  </body>
</html>